<template>
	<view class="my-qrcode-main">

		<sp-html2canvas-render domId="render-dom" ref="renderRef" @renderOver="renderOver"></sp-html2canvas-render>

		<!-- 头部（返回图标和标题） -->
		<view class="my-qrcode-top">
			<view class="my-qrcode-page-return" @click="retrunPreview">
				<uni-icons type="left" size="25"></uni-icons>
			</view>
			<view class="my-qrcode-title">
				我的名片
			</view>
		</view>

		<!-- 我的名片内容包括（头像，用户名，二维码图片，下方提示文字） -->
		<view class="my-card-content" id="render-dom">
			<view class="my-card-content-top">
				<!-- 头像 -->
				<view class="my-avatar">
					<image :src="myUserAvatar" mode="aspectFit"></image>
				</view>
				<!-- 用户名 -->
				<view class="user-name">
					{{myUserName}}
				</view>
				<!-- 二维码 -->
				<view class="my-qrcode">
					<!-- #ifdef APP-PLUS -->
					<l-qrcode :value="cardQR" :icon="myUserAvatar" />
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<image :src="h5QrcodeImg" mode="aspectFit"></image>
					<!-- #endif -->
				</view>
			</view>

			<!-- tips -->
			<view class="scan-qrcode-tip">
				扫一扫二维码，可以添加我为好友
			</view>
		</view>

		<!-- 保存相册按钮 -->
		<view class="save-qrcode" @click="saveQrcode">
			<button>保存到相册</button>
		</view>

	</view>
</template>

<script>
	import {
		checkPhotoLibraryPermission,
		gotoAppPermissionSetting
	} from '@/common/system/judgePermission.js'
	import {
		getMyBusinessCard
	} from '@/request/user.js';
	import {
		base64ToPath
	} from "@/uni_modules/sp-html2canvas-render/utils/index.js";
	export default {
		data() {
			return {
				myUserAid: 1,
				myUserAvatar: 'https://img1.baidu.com/it/u=3200425930,2413475553&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800', // 我的头像
				myUserName: '疆屿用户345286', // 我的用户名
				cardQR: `hbuilder://pages/tabBar/template/userDetailPage?aid=${this.myUserAid}`, // 二维码图片
				h5QrcodeImg: 'https://img0.baidu.com/it/u=582752653,3386538207&fm=253&fmt=auto&app=138&f=GIF?w=500&h=500',
			}
		},
		onLoad() {
			// 获取我的名片信息
			this.getMyBusinessCardFunc();
		},
		methods: {

			// 获取我的名片信息
			getMyBusinessCardFunc() {
				getMyBusinessCard().then(res => {
					console.log(res);
					this.myUserAid = res.data.data.userAid;
					this.myUserAvatar = res.data.data.myUserAvatar;
					this.myUserName = res.data.data.myUserName;
					this.cardQR = `hbuilder://pages/tabBar/template/userDetailPage?${res.data.data.userAid}`;
				}).catch(err => {
					console.error(err);
					uni.showToast({
						title: '请稍后再试...',
						icon: 'none'
					})
				})
			},

			// 返回上一页
			retrunPreview() {
				uni.navigateBack();
			},

			saveQrcode() {
				// #ifdef APP-PLUS
				// 调用组件实例中h2cRenderDom方法
				this.$refs.renderRef.h2cRenderDom();
				// #endif
				// #ifdef H5
				const link = document.createElement('a');
				link.href = '../../../../static/icons/HOT.png';
				link.download = 'my_card_content.jpg';
				link.style.display = 'none';
				document.body.appendChild(link);
				link.click();
				document.body.removeChild(link);
				// #endif
			},
			renderOver(e) {
				// e为导出截图的base64格式字符串
				// console.log("==== renderOver :", e);
				// 先判断相册权限
				// const judgeRes = await checkPhotoLibraryPermission();
				// console.log(judgeRes);
				// if (judgeRes === 0) {
				// 	// 去打开权限
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: '您还没有开启相册权限，是否开启？',
				// 		success: function(res) {
				// 			if (res.confirm) {
				// 				console.log('用户点击确定');
				// 				gotoAppPermissionSetting();
				// 			} else if (res.cancel) {
				// 				console.log('用户点击取消');
				// 			}
				// 		}
				// 	})
				// }
				// 保存到相册
				console.log("开始保存相册");
				base64ToPath(e).then((res) => {
					console.log("==== path :", res);
					uni.saveImageToPhotosAlbum({
						filePath: res, // 使用截图生成的base64数据作为文件路径
						success: () => {
							uni.showToast({
								title: '保存成功',
								icon: 'success'
							});
						},
						fail: (err) => {
							uni.showToast({
								title: '保存失败，请检查权限',
								icon: 'none'
							});
							console.error('保存图片到相册失败:', err);
						}
					});
				});
			}
		},
	}
</script>


<style lang="scss" scoped>
	.my-qrcode-main {
		width: 100%;

		.my-qrcode-top {
			width: 90%;
			margin-left: auto;
			margin-right: auto;
			margin-top: 60rpx;
			display: flex;
			flex-direction: row;
			justify-content: center; // 让子元素在水平方向居中
			align-items: center; // 让子元素在垂直方向居中
			position: relative;

			.my-qrcode-page-return {
				position: absolute;
				left: 0;
			}

			.my-qrcode-title {
				font-size: 40rpx;
				letter-spacing: 1rpx;
			}
		}

		.my-card-content {
			margin-top: 60rpx;
			width: 80%;
			height: 70vh;
			background-color: #fff;
			margin-left: auto;
			margin-right: auto;
			border-radius: 20rpx;
			box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1), 0px - 2px 4px rgba(0, 0, 0, 0.05);
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;

			.my-card-content-top {
				text-align: center;

				.my-avatar {
					image {
						width: 150rpx;
						height: 150rpx;
						border-radius: 50%;
					}
				}

				.user-name {
					margin-top: 30rpx;
					font-size: 36rpx;
				}

				.my-qrcode {
					margin-top: 30rpx;
				}
			}

			.scan-qrcode-tip {
				font-size: 34rpx;
				color: 676767;
			}
		}

		.save-qrcode {
			margin-top: 60rpx;
			text-align: center;

			button {
				width: 80%;
				height: 100rpx;
				background-color: #66596b;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50rpx;
			}
		}
	}
</style>